<form [formGroup]="formGroup">

    <div class="modal-header">
        <h4 *ngIf="createNew">写消息</h4>
        <h4 *ngIf="viewMsg">阅读消息</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onClose()">
            <span>&times;</span>
        </button>
    </div>

    <div class="modal-body">
        <mat-card>
            <mat-form-field *ngIf="createNew" style="width: 100%">
                <mat-chip-list #chipList aria-orientation="horizontal">
                    <mat-chip *ngFor="let receiver of receiverList.value" [selectable]="true"
                              [removable]="!viewMsg" (removed)="removeFromReceiverList(receiver)">
                        {{receiver}}
                        <mat-icon matChipRemove *ngIf="!data.isView">cancel</mat-icon>
                    </mat-chip>
                    <input #staticRouter type="text" [disabled]="viewMsg"
                           placeholder="收信人"
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="true"
                           (matChipInputTokenEnd)="addToReceiverList($event.value); staticRouter.value=''">
                </mat-chip-list>
            </mat-form-field>
            <mat-form-field *ngIf="viewMsg" style="width: 100%">
                <input matInput formControlName="sender" type="text" placeholder="发信人" *ngIf="viewReceived">
                <input matInput formControlName="receiver" type="text" placeholder="收信人" *ngIf="!viewReceived">
            </mat-form-field>
            <mat-form-field style="width: 100%">
                <input matInput formControlName="subject" type="text" placeholder="主题" maxlength="120">
            </mat-form-field>
            <mat-form-field style="width: 100%">
                <textarea matInput formControlName="content" placeholder="正文" maxlength="1024" style="height: 160px"></textarea>
            </mat-form-field>
            <div style="text-align: center" *ngIf="viewMsg && url">
                <button (click)="jumpToUrl()">
                    目标页面
                </button>
            </div>
        </mat-card>
    </div>

    <div class="modal-footer" *ngIf="!viewMsg">
        <button mat-raised-button (click)="onClose()">
            <span class="fa fa-ban">&nbsp;取消</span>
        </button>
        <button mat-raised-button color="primary" (click)="onSend()"
                [disabled]="formGroup.invalid || !subject.value || ! receiverList.value">
            <span class="fa fa-send">&nbsp;发送</span>
        </button>
    </div>

    <div class="modal-footer" *ngIf="viewMsg">
        <button mat-raised-button color="primary" (click)="onClose()">
            <span class="fa fa-check-circle">&nbsp;确定</span>
        </button>
    </div>

</form>
